<template>
    <div class="monitoring">
        
        <div class="right">
            <div class="text">
                <p>{{config.systemName}}</p>
                <img src="../assets/img/mg427.png" alt="">
            </div>
            <div class="bottom">
                <div class="bottom-left">
                    <div class="tabs" style="margin-top:0">
                        <p>关键参数</p>
                        <img src="../assets/img/mg427.png" alt="">
                    </div>
                    <div class="infos">
                        <div class="top_border"></div>
                        <el-tree
                            :data="monitorList"
                            :props="defaultProps"
                            accordion
                            :filter-node-method="filterNode"
                            :default-expanded-keys="[0]"
                            :highlight-current="true"
                            @node-click="handleNodeClick"
                            ref="tree">
                        </el-tree>
                        <div class="bottom_border"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="left">
            <div class="bottom-right">
                <el-date-picker
                    v-model="form.date"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    @change="handle"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="mini"
                    align="right">
                </el-date-picker>
                <el-button type="primary" size="mini" @click="onSubmit">生成图表</el-button>
            </div>
            <div class="left-bottom" v-if="isShow">
                <div class="left-bottom-item">
                    <div class="tabs">
                        <p>时序对比图({{timeData}})</p>
                        <img src="../assets/img/mg427.png" alt="">
                    </div>
                    <div style="height:40%">
                        <sequential :infos="infos" :data="form.date"/>
                    </div>
                </div>
                <div class="left-bottom-item">
                    <div class="tabs">
                        <p>家族对比分析({{timeData}})</p>
                        <img src="../assets/img/mg427.png" alt="">
                    </div>
                    <div>
                        <family :infos="familyInfos" :data="form.date"/>
                    </div>
                </div>
            </div>
            <div>
                
            </div>
        </div>
    </div>
</template>

<script>
import family from '../components/family.vue'
import sequential from '../components/sequential.vue'
import { getHistoryInfo} from "../assets/api/api"
import {formatDate,getInfo} from "../assets/tool/common"
export default {
    components:{
        family,
        sequential
    },
    data(){
        return {
            form: {
                date: [new Date().getTime() - 3600 * 1000 * 24, new Date().getTime()],
                // type: [],
            },
            pickerOptions: {
                disabledDate:(time)=> {
                    return time.getTime() > Date.now()
                },
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            multipleSelection:[],
            isShow:false,
            infos:{},
            familyInfos:{},
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            btnList:[
                ['T_In_Valve','T_Out_Valve','F_Of_CW','P_In_Valve','P_Out_Valve','L_In_Tank','P_In_Tank',
                'L_rep_Tank','CW_Conduct','DW_Conduct','F_Of_DW','VB01_Feedback','VB02_Feedback','T_Of_H01','T_Of_H02','T_Of_H03',
                'P01currentA','P02currentA'],
                ['L_Buffer_Pool','BP_Conduct','Freq_M01_Feedback','Freq_M02_Feedback','Freq_M03_Feedback','Freq_M04_Feedback',
                'Freq_M05_Feedback','Freq_M06_Feedback'],
                ['Freq_E5_P01_Feedback','P_In_E5_PT01','P_Out_E5_PT02','P_In_E5_PT03','P_In_E5_PT04','P_discharge_E5_PT05',
                'QIT01_Conduct','QIT02_Conduct','F_Of_FIT01','ORPO_electric','F_Of_FIT02'],
                ['T_In_Hall','H_In_Hall','Envi_temp','T_Condensation']
            ],
            nameList:{
                T_In_Valve:"进阀温度",
                T_Out_Valve:"出阀温度",
                F_Of_CW:"冷却水流量",
                P_In_Valve:"进阀压力",
                P_Out_Valve:"出阀压力",
                L_In_Tank:"膨胀罐液位",
                P_In_Tank:"膨胀罐压力",
                L_rep_Tank:"补水罐液位",
                CW_Conduct:"冷却水电导率",
                DW_Conduct:"去离子水电导率",
                F_Of_DW:"去离子水流量",
                VB01_Feedback:"VB01电动比例阀开度",
                VB02_Feedback:"VB02电动比例阀开度",
                T_Of_H01:"H01电加热器温度",
                T_Of_H02:"H02电加热器温度",
                T_Of_H03:"H03电加热器温度",
                P01currentA:"P01主泵电机电流",
                P02currentA:"P02主泵电机电流",
                L_Buffer_Pool:"缓冲水池液位",
                BP_Conduct:"喷淋水电导率",
                Freq_M01_Feedback:"M01风机运行频率",
                Freq_M02_Feedback:"M02风机运行频率",
                Freq_M03_Feedback:"M03风机运行频率",
                Freq_M04_Feedback:"M04风机运行频率",
                Freq_M05_Feedback:"M05风机运行频率",
                Freq_M06_Feedback:"M06风机运行频率",
                Freq_E5_P01_Feedback:"P01高压泵运行频率",
                P_In_E5_PT01:"PT01高压泵进水压力",
                P_Out_E5_PT02:"PT02高压泵出水压力",
                P_In_E5_PT03:"PT03反渗透二段膜组件进水压力",
                P_In_E5_PT04:"PT04反渗透三段膜组件进水压力",
                P_discharge_E5_PT05:"PT05反渗透浓水排放压力",
                QIT01_Conduct:"QIT01反渗透入水电导率",
                QIT02_Conduct:"QIT02反渗透产水电导率",
                F_Of_FIT01:"FIT01反渗透产水流量",
                ORPO_electric:"ORP0氧化还原电位",
                F_Of_FIT02:"FIT02反渗透浓水流量",
                T_In_Hall:"阀厅温度",
                H_In_Hall:"阀厅湿度",
                Envi_temp:"室外温度",
                T_Condensation:"凝露温度"
            },
            // uuidList:['10M51111155825988','10M51111155825991','10M51111155825989','10M51111155825990']
            uuidList:['0D0D-E927-AD79-6A65','2627-EB48-7F10-BCCF','FFA4-EB6C-15A8-3C32','30E4-EDC0-F9C0-817D']
            // uuidList:['C038-61C1-FD29-E6BA','C23A-2A8B-92C5-AAF3','5915-F9BD-AC1E-92DC','1F9E-E209-0011-5C91']
        }
    },
    computed:{
        config(){
            const config = window.localStorage.getItem('config')
            return config ? JSON.parse(config) : {}
        },
        timeData(){
            return formatDate(this.form.date[0])+" - "+formatDate(this.form.date[1])
        },
        monitorList(){
            let result = [
                {
                    id:1,
                    label:'内冷系统',
                    children:[]
                },
                {
                    id:2,
                    label:'外冷系统',
                    children:[]
                },
                {
                    id:3,
                    label:'水处理系统',
                    children:[]
                },
                {
                    id:4,
                    label:'阀厅环境',
                    children:[]
                }
            ]

            for(let key in this.nameList){
                const item = {
                    key:key,
                    label:this.nameList[key]
                }

                if(this.btnList[0].indexOf(key) !== -1){
                    result[0]['children'].push(item)
                }

                if(this.btnList[1].indexOf(key) !== -1){
                    result[1]['children'].push(item)
                }

                if(this.btnList[2].indexOf(key) !== -1){
                    result[2]['children'].push(item)
                }

                if(this.btnList[3].indexOf(key) !== -1){
                    result[3]['children'].push(item)
                }

            }
            
            return result
        }
    },
    watch: {

    },
    mounted(){
        
    },
    methods: {
        handle() {
            if(this.form.date){
                var endAt = new Date(this.form.date[1]) * 1000 /1000;
                var startAt = new Date(this.form.date[0]) * 1000 /1000;
                // 只能选择今天之前的数据
                if(endAt > Date.now()) {
                    this.form.date[1] = new Date();
                }
                // 最大只能选择3个月的数据
                if(endAt - startAt > 3600 * 1000 * 24 * 90){
                    this.form.date[0] = endAt - 3600 * 1000 * 24 * 90;
                }
            }
            

        },
        handleNodeClick(data) {
            console.log(data);
        },
        addItem(){
            let list = {
                name:'',
                data:'',
                unit:''
            }
            this.monitorList.push(list)
        },
        onSubmit() {
            this.multipleSelection = this.$refs.tree.getCurrentNode()
            
            this.isShow = false
            if(!this.multipleSelection || this.multipleSelection.id){
                this.$message({
                    message: '请在列表勾选一条信息',
                    type: 'warning'
                });
                return
            }
            this.getAllInfos()
        },
        // 获取所有设备的系统信息
        getAllInfos(){
            var lists = {}
            var funList = []

            var list = this.$store.state.infoList.filter((item) => {
                    return item.baseInfo.name === this.config.systemName
                })[0]
            for(let i=0;i<this.uuidList.length;i++){
                const item = this.uuidList[i]
                const params = {
                    start:formatDate(this.form.date[0]),
                    end:formatDate(this.form.date[1]),
                    uuid: item,
                    token:this.config.token,
                    noPager:true
                }
                funList[i] = new Promise((resolve)=>{
                    getHistoryInfo(params,(res) => {
                        if(res.code === 200){
                            let msg = {
                                uuid:item,
                                data:getInfo(this.multipleSelection,res.data.datas)
                            }
                            resolve(msg)
                        }
                    })
                })
            }


            Promise.all([...funList]).then(res=> {
                let data = res.filter((item) => item.data.timers.length > 0)
                if(data.length > 0){
                    lists.timers = data[0]['data']['timers']
                }
                
                lists.resultLists = {}
                res.map((message) => {
                    const item = message.data.resultLists
                    lists.resultLists[message.uuid] = item
                    lists.resultLists[message.uuid] = lists.resultLists[message.uuid][this.multipleSelection.key]
                    this.familyInfos = lists
                    this.familyInfos.unit = this.multipleSelection.key
                    if(message.uuid === list.uuid){
                        this.infos = message.data
                        this.infos.uuid = message.uuid
                    }
                    this.isShow = true
                })
            }) 
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        }
    },
}
</script>
<style lang="less">
.monitoring{
    .el-table,.el-table thead,.el-form-item__label,.el-checkbox,.el-table__empty-text,.el-input__inner,.el-tree,.el-date-editor .el-range-input,
    .el-date-editor .el-range-separator{
        color: #8DCFF8;
    }
    .el-table th, .el-table tr,.el-table__body-wrapper,.el-input__inner,.el-tree,input{
        background: #1C2755 !important;
    }
    .el-table--enable-row-hover .el-table__body tr:hover>td,.el-tree-node__content:hover,.el-tree-node:focus>.el-tree-node__content{
        background: #0d1830;
    }
    .el-button--primary{
        margin-left: 20px;
    }
    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
        background: #0d1830;
        color: #5273E0;
    }
    .el-tree-node__content>.el-tree-node__expand-icon{
        position: absolute;
        right: 20px;
    }
    .el-tree-node__label{
        padding-left: 10px;
    }
    .el-tree-node__content{
        height: 35px;
    }
    
}
.el-picker-panel,
.el-picker-panel [slot=sidebar],
.el-picker-panel__sidebar,
.el-picker-panel__shortcut,
.el-input__inner,
.el-picker-panel__footer,
.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div,
.el-input.is-disabled .el-input__inner{
    background: #0d1830;
    color: #ffffff;
}
.el-button+.el-button{
    background: #164C7E !important;
    border-color: #409EFF;
    color: #ffffff;
}
.el-picker-panel__icon-btn{
    color: #FFFFFF;
}
</style>

<style lang="less" scoped>
.monitoring{
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        background   : #5273E0;
    }
    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background   : #164C7E;
    }
    .text{
        color: #8DCFF8;
        font-size: 14px;
        display: flex;
        align-items: center;
        position: relative;
        padding-left: 10px;
        img{
            width: 43px;
            margin-left: 10px;
        }
        &::before{
            position: absolute;
            content: '';
            width: 3px;
            height: 60%;
            top: 20%;
            left: 0;
            background: #8DCFF8;
        }
    }
    .left{
        width: 80%;
        text-align: center;
        margin-top: 20px;
        .left-bottom{
            width: 100% ;
            .left-bottom-item{
                flex: 1;
                background: #072241;
                margin-top: 20px;
                .tabs{
                    margin-bottom: 20px;
                    padding-top: 10px;
                    &::before{
                        top: 33%;
                    }
                }
            }
            .left-bottom-item:nth-child(1){
                margin-right: 20px;
            }
        }
        .bottom-right{
            text-align: left;
            .infos{
                .list{
                    height: 150px;
                }
            }
        }
    }
    .right{
        width: 20%;
        margin-right: 20px;
        padding-left: 20px;
        .bottom{
            width: 100%;
            .bottom-left{
                margin: 20px 0;
            }
        }
        .title{
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            .download{
                width: 50px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                background: #164C7E;
                size: 14px;
                border-radius: 3px;
                &:hover,&:active,&.active{
                    color: #8DCFF8;
                }
            }
            .tab{
                width: 100%;
                height: 40px;
                display: flex;
                position: relative;
                p{
                    width: 80px;
                    height: 30px;
                    line-height: 30px;
                    margin-right: 10px;
                    background: #164C7E;
                    size: 16px;
                    color: #5273E0;
                    text-align: center;
                    cursor: pointer;
                    border-radius: 3px;
                        &:hover,&:active,&.active{
                            color: #8DCFF8;
                        }
                    }
                .full{
                    padding-right: 10px;
                    img{
                    width: 30px;
                    height: 30px;
                    }

                }
            }
            
            }
        .why,.plan,.infos{
            margin-top: 10px;
            margin-bottom: 3px;
            border-top: 1px solid #164C7E;
            border-bottom: 1px solid #164C7E;
            position: relative;
            .top_border{
                position: relative;
                width: 100%;
                height: 0;
                &::before{
                    position: absolute;
                    content: '';
                    top: -1px;
                    left: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
                &::after{
                    position: absolute;
                    content: '';
                    top: -1px;
                    right: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
            }
            .bottom_border{
                position: relative;
                width: 100%;
                height: 0;
                &::before{
                    position: absolute;
                    content: '';
                    bottom: -1px;
                    left: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
                &::after{
                    position: absolute;
                    content: '';
                    bottom: -1px;
                    right: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
            }
            .list{
                margin: 0px 10px;
                padding: 10px 10px;
                background: rgba(22,76,126,0.2);
                .item{
                    height: 30px;
                    display: flex;
                    border-radius: 3px;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 10px;
                    color: #FFFFFF;
                    &:nth-child(odd){
                        background: rgba(22,76,126,0.1);
                    }
                }
            }
        }
        .infos{
            .list{
                height: 450px;
                overflow-y: auto;
                overflow-x: hidden;
            }
            .item{
                p{
                    width: 20%;
                    text-align: center;
                    &:nth-last-child(1){
                        cursor: pointer;
                    }
                }
            }
        }
    }
    .tabs{
        color: #8DCFF8;
        font-size: 14px;
        display: flex;
        align-items: center;
        position: relative;
        padding-left: 10px;
        margin-top: 10px;
        margin-left: 10px;
        img{
            width: 43px;
            margin-left: 10px;
        }
        &::before{
            position: absolute;
            content: '';
            width: 3px;
            height: 60%;
            top: 20%;
            left: 0;
            background: #8DCFF8;
        }
    }
    .tip{
        color: #ffffff;
        font-size: 12px;
        padding-left: 10px;
        margin-bottom: 30px;
        i{
            font-size: 12px;
            color: #D87A16;
        }
    }
}
</style>
